<template>
    <view class="container">
        <view class="header">
            <text class="title">消防设施维保信息</text>
        </view>
        <view class="content">
            <!-- 印章根据维保结果动态改变颜色 -->
            <view :class="['seal', sealClass]" style="color: black;">{{ data.stateName }}</view>
            <!-- 圆形水印/印章 -->
            <view class="watermark">
                <view class="watermark-text">
                    {{ data.mainClientName }}
                </view>
            </view>
            <view class="item" v-for="i in config">
                <text class="label">{{i.title}}:</text>
                <view v-if="i.key!=='informationPhoto'&&i.key!=='resultPhoto'">
                    <text class="value" v-if="data[i.key]">{{data[i.key]}}</text>
                    <text class="value" v-if="!(data[i.key])">空</text>
                </view>
                <view v-else>
                    <view v-if="getUrl(data[i.key])==null">
                        <view class="text">空</view>
                    </view>
                    <view v-else-if="getUrl(data[i.key]).type=='Array'" v-for="(url, index) in getUrl(data[i.key]).data"
                          style="display: inline-block;">
                        <image :src="this.$baseUrl + url" alt="图" class="photoPreview"
                               @click="previewImage(getUrl(data[i.key]).data, index)" />
                    </view>
                    <view v-else>
                        <image :src="this.$baseUrl + getUrl(data[i.key]).data" alt="点位图" class="photoPreview"
                               @click="previewImage([getUrl(data[i.key]).data], 0)"/>
                    </view>
                </view>
            </view>
        </view>
        <CompileButton @click="navigateToPage"/>
    </view>
</template>

<script>
    import CompileButton from '@/common/component/CompileButton.vue';

    export default {
        components: {
            CompileButton
        },
        props: {
            config: {
                type: Array,
                default: [{
                    title: '单位名称',
                    key: 'clientName'
                },
                    {
                        title: '维保单位',
                        key: 'mainClientName'
                    },
                    {
                        title: '维保人员',
                        key: 'userName'
                    },
                    {
                        title: '维保地址',
                        key: 'addrName'
                    },
                    {
                        title: '巡检问题简述',
                        key: 'hiddenDanger'
                    },
                    {
                        title: '维保状态',
                        key: 'stateName'
                    },
                    {
                        title: '维保电话',
                        key: 'telephone'
                    },
                    {
                        title: '维保时间',
                        key: 'dateTime'
                    },
                    {
                        title: '维保信息',
                        key: 'information'
                    },
                    {
                        title: '维保图片',
                        key: 'informationPhoto'
                    },
                    {
                        title: '检查结果',
                        key: 'result'
                    },
                    {
                        title: '检查时间',
                        key: 'resultTime'
                    },
                    {
                        title: '检查图片',
                        key: 'resultPhoto'
                    },
                    {
                        title: '单位电话',
                        key: 'clientTelephone'
                    },
                ]
            },
            data: {
                type: Object,
                default: {
                    clientName: '',
                    mainClientName: '',
                    userName: '',
                    addrName: '',
                    hiddenDanger: '',
                    dateTime: '',
                    information: '',
                    state: '',
                    stateName: '',
                    telephone: '',
                    informationPhoto: '',
                    result: '',
                    resultTime: '',
                    resultPhoto: '',
                    clientTelephone: '',
                }
            }
        },
        data() {
            return {
                maintenanceStr: '',
            }
        },
        onLoad(options) {
            this.maintenanceStr = decodeURIComponent(options.maintenance);
            const maintenance = JSON.parse(this.maintenanceStr);
            console.log(maintenance)
            this.data.id = maintenance.id;
            this.data.clientName = maintenance.clientName;
            this.data.mainClientName = maintenance.mainClientName;
            this.data.userName = maintenance.userName;
            this.data.addrName = maintenance.addrName;
            this.data.hiddenDanger = maintenance.hiddenDanger;
            this.data.telephone = maintenance.telephone;
            this.data.information = maintenance.information;
            this.data.dateTime = maintenance.dateTime;
            this.data.result = maintenance.result;
            this.data.resultTime = maintenance.resultTime;
            this.data.clientTelephone = maintenance.clientTelephone;
            this.data.state = maintenance.state;
            if (maintenance.state === "0") {
                this.data.stateName = "已维保";
            } else if (maintenance.state === "1") {
                this.data.stateName = "未维保";
            }
            this.data.informationPhoto = maintenance.informationPhoto;
            this.data.resultPhoto = maintenance.resultPhoto;
        },
        computed: {
            // 根据维保结果计算印章的颜色
            sealClass() {
                switch (this.data.state) {
                    case '0':
                        return 'seal-success';
                    case '1':
                        return 'seal-fail';
                    default:
                        return 'seal-default'; // 默认颜色
                }
            }
        },
        methods: {
            previewImage(urls, currentIndex) {
                const images = urls.map(url => this.$baseUrl + url);

                // 使用 uni-app 的图片预览 API
                uni.previewImage({
                    current: currentIndex, // 当前显示图片的索引
                    urls: images, // 需要预览的图片链接列表
                    indicator: 'number', // 显示指示器
                    loop: true // 是否可循环播放
                });
            },
            getUrl(url){
                if(url==null){
                    return null
                }
                const urlResult = {type:"String",data:""}
                if(url.includes(',')){
                    const urlList = url.split(',')
                    urlResult.type="Array"
                    urlResult.data=urlList
                    return urlResult
                }
                urlResult.data=url
                return urlResult
            },
            navigateToPage() {
                uni.navigateTo({
                    url: '/pages/maintenance/add?maintenance=' + this.maintenanceStr,
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    @import url("@/common/globleCSS/photoPreview.css");
    .list {
        display: flex;
        flex-direction: column;
        background-color: #f2f2f2;
    }

    .item {
        margin-bottom: 24px;
        display: flex;
        flex-direction: column; /* 垂直布局 */
    }

    /* 页面背景及容器 */
    .container {
        height: calc(100% - 40px);
        background: linear-gradient(135deg, #ff6b6b, #f9a8d4); /* 渐变背景 */
        display: flex;
        flex-direction: column; /* 垂直布局 */
        justify-content: center; /* 垂直居中 */
        align-items: center; /* 水平居中 */
        padding: 20px; /* 给容器加一些内边距 */
        overflow-y: auto;
        /* 开启滚动 */
    }

    /* 标题部分 */
    .header {
        text-align: center;
        margin-bottom: 20px; /* 调整标题与卡片之间的间距 */
    }

    .title {
        font-size: 26px;
        font-weight: bold;
        color: #fff;
    }

    /* 信息内容部分 */
    .content {
        background-color: #fff;
        width: 85%; /* 使内容宽度为父容器的 90% */
        max-width: 600px; /* 最大宽度限制 */
        padding: 30px;
        border-radius: 12px; /* 圆角 */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        background: #fff; /* 背景颜色 */
        position: relative; /* 使印章可以定位到右上角 */
        overflow: hidden; /* 防止水印溢出 */
        overflow-y: auto;
    }

    /* 水印/印章的容器 */
    .watermark {
        position: absolute;
        top: 30%; /* 水印距离顶部的距离 */
        left: 50%; /* 水印水平居中 */
        transform: translateX(-50%); /* 水印水平居中 */
        width: 180px; /* 水印的宽度 */
        height: 180px; /* 水印的高度 */
        border-radius: 50%; /* 圆形 */
        border: 2px solid rgba(255, 0, 0, 0.5); /* 红色边框 */
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        opacity: 0.3; /* 设置水印的透明度 */
        pointer-events: none; /* 使水印不影响其他交互 */
        z-index: 1; /* 确保水印不遮挡其他内容 */
    }

    /* 文字环绕圆形边缘 */
    .watermark-text {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        text-align: center;
        transform-origin: center;
        font-size: 14px;
        color: rgba(255, 0, 0, 0.7);
        line-height: 1.5;
        font-weight: bold;
        transform: rotate(0deg);
        animation: rotateText 10s linear infinite; /* 文字旋转动画 */
    }

    /* 旋转文字的动画 */
    @keyframes rotateText {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    /* 动态印章样式 */
    .seal {
        position: absolute;
        top: 10px;
        right: 10px;
        color: white;
        font-weight: bold;
        padding: 10px 20px;
        border-radius: 50%; /* 圆形效果 */
        font-size: 14px;
        text-align: center;
        transform: rotate(-20deg); /* 使印章略微倾斜 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    }

    /* 根据不同维保结果的印章颜色 */
    .seal-success {
        background-color: #4caf50; /* 绿色 */
    }

    .seal-fail {
        background-color: #f44336; /* 红色 */
    }

    .seal-default {
        background-color: #9e9e9e; /* 默认灰色 */
    }

    /* 单项信息 */
    .item {
        margin-bottom: 24px;
        display: flex;
        flex-direction: column; /* 垂直布局 */
    }

    .label {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 10px; /* 标签与内容的间距 */
    }

    .value {
        font-size: 16px;
        color: #555;
        line-height: 1.5; /* 增加行间距，使文字不显得拥挤 */
        word-break: break-word; /* 防止文字溢出 */
        padding: 10px;
        border-radius: 6px; /* 圆角效果 */
        background-color: #f9f9f9; /* 背景色稍微变浅 */
    }
</style>
